<template>
  <div class="price">
    <div class="price-innerContainer">
      <h3>景点门票</h3>
      <p>
        <span class="price-color"></span>
        <span class="price-title">{{priceList[0].title}}</span>
      </p>
      <div class="price-container">

        <div class="price-type-top" v-for="item of priceList" :key="item.id">
          <div class="price-type-top-info">
            <h5>{{item.adult}}</h5>
            <div class="price-type-info-prices">
              ￥
              <em>{{item.money}}</em>
              <span>起</span>
            </div>
            <div class="price-icon">❀</div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    priceList: Array
  },
  name: 'DetailsPrice',
  data () {
    return {
    }
  }
}
</script>

<style lang="stylus" scoped>
  .price
    background white
    .price-innerContainer
      padding 0 .16rem .32rem
      background #fff
      margin-bottom .2rem
      h3
        overflow hidden
        position relative
        z-index 4
        background #fff
        color #212121
        font-size .4rem
        line-height .56rem
        font-weight bold
        padding .32rem 0 0 .04rem
      p
        font-size .32rem
        line-height .44rem
        font-weight bold
        color #212121
        align-items baseline
        display flex
        padding-top .28rem
      .price-color
        background-image linear-gradient(126deg,#00e0ca 0,#00bfd4 100%)
        border-radius .06rem
        height .24rem
        min-width .08rem
        margin-right .12rem
      .price-container
        margin-top .32rem
        background #fff
        box-shadow 0 0.04rem 0.12rem 0 rgba(0,0,0,0.10)
        border-radius .16rem
        .price-type-top
          overflow hidden
          padding .32rem 0
          margin 0 .2rem
          .price-type-top-info
            position relative
            z-index 2
            margin-bottom -.02rem
            background #fff
            h5
              overflow hidden
              text-overflow ellipsis
              font-size .3rem
            .price-type-info-prices
              right .52rem
              margin-top -.28rem
              color #ff9800
              font-size .24rem
              overflow hidden
              position absolute
              top 50%
              line-height .4rem
              em
                margin-left -.07rem
                font-size .4rem
              span
                display inline-block
                font-size .24rem
                transform scale(.8)
            .price-icon
              right .2rem
              margin-top -.22rem
              color #bbb
              font-size .32rem
              overflow hidden
              position absolute
              top 42%
              line-height .4rem
              color #ff9800

</style>
